<template>
	<u-navbar
			title=""
			@rightClick="back"
			:autoBack="true"
	>
	</u-navbar>
	<view class="container">
		<view class="content">
			<view class="content-left">
				<view class="left-title">
					忘记密码
				</view>
				<view class="left-tips">
					请输入手机号和验证码找回密码
				</view>
			</view>

			<view class="box">

			<view class="list">
				<view class="item">
					<view class="items">
							<view class="image">
								手机号
							</view>
						<input class="uni-input" maxlength="11" v-model="form.mobile" placeholder="请输入电话" />
					</view>
				</view>
				<view class="item">
					<view class="items">
							<view class="image">
								验证码
							</view>
						<input class="uni-input"  maxlength="6" v-model="form.smg" placeholder="请输入验证码"/>
					</view>
					<view class="code-box" @click="getcode">
						{{time}}
					</view>
				</view>
				<view class="item">
					<view class="items">
							<view class="image">
							密码
							</view>
					<input class="uni-input" v-model="form.password" placeholder="请输入密码" :password="showPassword" />
					</view>
					<uni-icons color="#333"  :type="!showPassword?'eye-filled':'eye-slash-filled'" size="26"
						@click="changePassword"></uni-icons>
				</view>
				<view class="item">
					<view class="items">
							<view class="image">
				确认密码
							</view>
					<input class="uni-input" v-model="form.re_password" placeholder="请再次输入密码" :password="showPasswords" />
					</view>
					<uni-icons color="#333" :type="!showPasswords?'eye-filled':'eye-slash-filled'" size="26"
						@click="changePasswords"></uni-icons>
				</view>
				<view class="btnBox-my" @click="login">
					确认
				</view>

			</view>
			<view class=""></view>

		</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow} from "@dcloudio/uni-app";
	const {appContext} = getCurrentInstance();
	let form = reactive({
		mobile: '',
		password: '',
		re_password:'',
		smg:''
	})
	let time=ref('获取验证码')
	let showPassword = ref(true)
	let showPasswords = ref(true)
	function getcode(){
		if(time.value!='获取验证码'){
			return false
		}
		if (!(/^1[3456789]\d{9}$/).test(form.mobile)) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '手机号不正确'
			});
			return false;
		}
		appContext.config.globalProperties.$request({
			url: `api/smscodesview/`,
			method:'post',
			data:{mobile:form.mobile} ,
			success(res) {
				uni.showToast({
					icon:'none',
					title:res.errmsg
				})
				if(res.errno==0){
					let times=60
					let timer=setInterval(function(){
						if(times==0){
							time.value='获取验证码'
							clearInterval(timer)
						}else{
							times--
							time.value=times+'S重发'
						}
					},1000)
				}
			}
		})
	}
	function login() {

		if (!(/^1[3456789]\d{9}$/).test(form.mobile)) {
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '手机号不正确'
			});
			return false;
		}
		if(form.smg.length!=6){
			uni.showToast({
				icon: 'none',
				title: "验证码不对"
			})
			return false
		}
		if (form.password.length < 6) {
			uni.showToast({
				icon: 'none',
				title: "请输入6位数及以上密码"
			})
			return false
		}
		if(form.password!=form.re_password){
			uni.showToast({
				icon: 'none',
				title: "密码不一致"
			})
			return false
		}
		appContext.config.globalProperties.$request({
			url: `api/forget/`,
			method: 'post',
			data: form,
			success(res) {
				console.log(res)
				uni.showToast({
					icon: 'none',
					title: res.errmsg
				})
				if (res.errno == 0) {
					setTimeout(()=>{
						uni.redirectTo({
							url: '/pages/login/login'
						})
					},1000)

				}
			}
		})
	}
	function changePassword() {
		console.log('showPassword', showPassword.value)
		showPassword.value = !showPassword.value;
	}
	function changePasswords() {
		console.log('showPassword', showPassword.value)
		showPasswords.value = !showPasswords.value;
	}

	function back() {
		uni.navigateBack()
	}
</script>
<style lang="scss" scoped>
	@import '@/static/css/login.scss';
	page{
		background-color: #fff;
	}
	.content-left{
		padding: 0 30rpx;
		margin-top: 200rpx;
		.left-title{
			font-weight: bold;
			font-size: 40rpx;
			color: #2D2D2D;
			margin-top: 68rpx;
		}
		.left-tips{
			font-weight: 400;
			font-size: 28rpx;
			color: #888888;
		}
	}
	.btnBox-my{
		height: 96rpx;
		background: #2E7D32;
		border-radius: 16rpx;
		text-align: center;
		line-height: 96rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		margin: 300rpx 20rpx 0 20rpx;
	}
	.code-box{
		font-weight: 400;
		font-size: 28rpx;
		color: #F67800;
		width: 250rpx;
	}
</style>
